<template>
  <div class="article_main">
    <el-card class="search-main card" shadow="never">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <el-form ref="form" class="search-form" :model="search" label-width="100px" size="small">

        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="作者">

              <el-input
                v-model="search.author"
                class="search-input"
                size="small"
                placeholder="作者"
              />
            </el-form-item>

          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="标题">
              <el-input
                v-model="search.title "
                class="search-input"
                size="small"
                placeholder="标题"
              />
            </el-form-item>

          </el-col>
          <el-col :span="6" :offset="0">

            <el-form-item label="编辑类型">
              <el-select
                v-model="search.editorType"
                class="search-input"
                size="small"
                clearable
                placeholder="编辑类型"
              >
                <el-option label="富文本" :value="0" />
                <el-option label="MarkDown" :value="1" />
              </el-select>
            </el-form-item>

          </el-col>

          <el-col :span="6" :offset="18">
            <el-button
              type="default"
              size="mini"
              @click="doReset"
            >重置
            </el-button>
            <el-button
              type="primary"
              size="mini"
              @click="doSearch"
            >搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 文章列表 -->
    <el-card shadow="never" class="card">
      <div slot="header">
        <el-button
          type="primary"
          size="small"
          @click="addArticle"
        >新增</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="articleList"
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="#" fixed="left" />

        <el-table-column
          align="center"
          label="文章标题"
          prop="title"
          width="250"
        >
          <template slot-scope="scope">
            <span> {{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="展示图片" align="center" width="200">
          <template slot-scope="scope">
            <img :src="scope.row.coverImg" class="table_img">
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="添加时间"
          prop="createTime"
          width="300"
        />
        <el-table-column
          align="center"
          label="文章作者"
          prop="author"
          width="200"
        />
        <el-table-column align="center" label="文章是否展示" width="200">
          <template slot-scope="scope">

            <el-switch
              v-model="scope.row.isShow"
              size="small"
              :active-value="1"
              :inactive-value="0"
              @change="switchCode(scope.row)"
            />

          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="内容"
          prop="editorType"
          width="200"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.editorType === 0">富文本框</el-tag>
            <el-tag v-else-if="scope.row.editorType === 1">Markdown</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              style="margin-right: 10px"
              type="text"
              size="small"
              @click="goEdit(scope.row)"
            >
              <i style="margin-right: 6px" class="el-icon-view" />编辑文章
            </el-button>
            <el-button type="text" size="small" @click="goDelete(scope.row)">
              <span style="color: red">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import contentApi from '@/api/content/index'
import mixin from '@/mixins/index'
export default {
    namr: 'articleList',
    mixins: [mixin],
    data() {
        return {
            articleList: [],
            loading: false,
            search: {},
            searchForm: {}
        }
    },
    created() {
        this.getArticleList()
    },
    methods: {
        switchCode(row) {
            var tempStatus = row.isShow === 0 ? 1 : 0
            contentApi.isShowApi({
                id: row.id,
                isShow: row.isShow
            })
                .then((res) => {
                    if (res.success) {
                        this.$message.success('修改状态成功')
                    } else {
                        row.isShow = tempStatus
                        this.$message.error('修改状态失败')
                    }
                })
                .catch((res) => {
                    row.isShow = tempStatus
                    this.$message.error('修改状态失败')
                })
        },
        doReset() {
            this.search = this.$options.data().search
            this.searchForm = this.$options.data().searchForm
        },
        doSearch() {
            this.page.currentPage = 1
            this.searchForm = Object.assign({}, this.search)
            this.getArticleList()
        },
        getArticleList() {
            this.loading = true
            var params = {}
            for (var key in this.searchForm) {
                if (this.searchForm[key] || this.searchForm[key] + '' === '0') {
                    params[key] = this.searchForm[key]
                }
            }
            contentApi
                .articleListApi(this.page.currentPage, this.page.size, params)
                .then((res) => {
                    if (res.success) {
                        this.articleList = res.data.rows
                        this.page.total = res.data.total
                    } else {
                        this.$message.error('获取列表失败')
                    }
                    this.loading = false
                })
        },
        // 分页规格改变
        handleSizeChange(val) {
            this.page.size = val
            this.page.currentPage = 1
            this.getArticleList()
        },
        // 分页点击
        handleCurrentChange(val) {
            this.page.currentPage = val
            this.getArticleList()
        },
        addArticle() {
            this.$router.push({ name: 'addArticle' })
        },
        goEdit(row) {
            // 路由跳转
            this.$router.push({ name: 'editArticle', params: { id: row.id }})
            // console.log(row)
        },
        goDelete(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    contentApi
                        .deleteArticleApi(row.id)
                        .then((res) => {
                            if (res.success) {
                                this.getArticleList()
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                })
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                        .catch((res) => {
                            this.$message.error(res.message)
                        })
                })
                .catch((rej) => {
                    console.log(rej)
                })
        }
    }
}
</script>

<style  scoped lang="scss">
.article_main {
  .search-form{
    ::v-deep .el-form-item{
      label{
          font-weight: normal;
        }
    }
  }
  .search-main {
    .search-input {
      width: 200px;
    }
  }
  .card {
    margin: 30px;
  }
  .search-main {
    .search-input {
      width: 200px;
    }
  }
  .table_img {
    width: 100px;
    height: 100px;
  }
  .searchBtn_wrapper {
    margin-top: 20px;
    display: flex;
    flex-direction: row-reverse;
  }
}
</style>
